<template>
  <div class="table-info mes-table">
    <el-table
      ref="table"
      v-loading="tableLoading"
      :data="tableData"
      class="table v-table"
      style="width: 100%"
      max-height="550"
      :default-sort="{ prop: defaultSort, order: 'descending' }"
      highlight-current-row
      border
      :row-style="rowStyle"
      @current-change="tableCurrentChange"
      @selection-change="tableSelectionChange"
      @sort-change="sortChange"
    >
      <!-- 无数据 -->
      <template slot="empty">
        <p>暂无数据</p>
      </template>
      <!-- 序号列 -->
      <el-table-column v-if="isNumberColumn" label="序号" type="index" width="50" />
      <!-- 选择列 -->
      <el-table-column v-if="isSelection" type="selection" width="50" />
      <el-table-column
        v-for="(item, index) in tableKey"
        :id="'table' + item.value + index"
        :key="'table' + item.value + index"
        :prop="item.value"
        :label="item.name"
        :min-width="item.minWidth"
        :align="item.algin || 'left'"
        :sortable="(item.sortable&&'custom') || false"
        show-overflow-tooltip
        :sort-orders="
          item.value === defaultSort
            ? ['ascending', 'descending']
            : ['ascending', 'descending', null]
        "
      >
        <template v-if="!item.slot" #default="scope">
          <span>{{ formatterCellVal(scope.row[item.value])}}</span>
        </template>
        <template v-else #default="scope">
          <slot :name="item.value" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        v-if="isOperation"
        fixed="right"
        label="操作"
        width="160"
        align="left"
      >
        <template #default="scope">
          <slot name="operationBtn" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "DataTable",
  components: {},
  props: {
    // 默认排序
    defaultSort: {
      type: String,
      default: "date",
    },
    // 表头
    tableKey: {
      type: Array,
      default: [],
    },
    // 是否显示序列号 默认显示
    isNumberColumn: {
      type: Boolean,
      default: true,
    },
    // 是否展示多选框 默认显示
    isSelection: {
      type: Boolean,
      default: true,
    },
    // 是否显示操作列 默认不显示
    isOperation: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      sort: 1,
      tableSelection: [],
      order: "desc",
    };
  },
  methods: {
    rowStyle({row, rowIndex}) {
      if (rowIndex % 2 === 0) { // 偶数行
        return {};
      } else {
        return { backgroundColor: '#f9f9f9' };
      }
    },
    // 无内容显示占位符
    formatterCellVal(cellValue) {
      return !cellValue && cellValue !== 0 ? "--" : cellValue;
    },
    // 监听多选
    tableSelectionChange(val) {
      this.tableSelection = val;
      this.$emit("table-selection-change", this.tableSelection);
    },
    // 监听单选
    tableCurrentChange(row) {
      this.tableSelection = row;
      this.$emit("table-selection-change", this.tableSelection);
    },
    sortChange(data) {
      this.tableLoading = true;
      const { prop, order } = data;
      if (!order) {
        // 处理order为null 回到默认的状态
        this.$refs.table.sort("date", "descending");
        return;
      }
      if (!prop) {
        this.$message("未知错误\n sortChange");
        return;
      }
      if (prop === "createTime") {
        this.sort = order === "descending" ? 1 : 2;
      } else if (prop === "auditTime") {
        this.sort = order === "descending" ? 3 : 4;
      }
      //   this.$emit('sort-change')
    },
  },
};
</script>
<style lang="less" scoped>
.mes-table {
  position: relative;
}
.e-item {
  display: flex;
  > div:first-child {
    flex: 1;
  }
}
.mes-table ::v-deep(.el-pager .number) {
  padding: 0 7px;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  margin-left: 8px;
  font-weight: 500;
  min-width: 28px;
}
.mes-table ::v-deep(.el-pager .number.active) {
  background: #ed4014;
  color: #fff;
}
.mes-table .t-file {
  color: #1e8cff;
  cursor: pointer;
  border-bottom: 1px solid;
  padding-bottom: 2px;
}
.mes-table .empty-tag {
  border: none;
  background: none;
}
.v-table ::v-deep(.el-date-editor .el-icon-date),
.v-table ::v-deep(.el-date-editor .el-icon-time) {
  width: 10px;
}

.column-required {
  position: relative;
  color: #f20303;
  font-size: 14px;
  top: 2px;
  right: 2px;
}
</style>

<style scoped>
/* .v-table ::v-deep(.even-row){
  background: rgb(245,247,250);
} */
.pagination {
  text-align: right;
  padding: 2px 28px;
  border: 1px solid #eee;
  border-top: 0px;
}
/* .v-table ::v-deep(.el-input .el-input__inner) {
  padding: 0 7px;
} */
.v-table ::v-deep(.el-table__header th) {
  /* padding: 0px !important; */
  background-color: #f8f8f9 !important;
  font-size: 13px;
  height: 46px;
  color: #616161;
}

.v-table ::v-deep(.el-table__header th.is-sortable) {
  padding: 3px !important;
}
.mes-table.text-inline ::v-deep(.el-table__body .cell),
.mes-table.text-inline ::v-deep(.el-table__header-wrapper .cell) {
  word-break: inherit !important;
  white-space: nowrap !important;
}
/* .v-table  ::v-deep(.el-table__body td) {
  padding: 9px 0 !important;
} */

.v-table ::v-deep(.el-table__footer td) {
  padding: 7px 0 !important;
}

.mes-table ::v-deep(.el-table-column--selection .cell) {
  display: inline;
}
.mes-table.text-inline ::v-deep(.el-table th > .cell) {
  white-space: nowrap !important;
}

.mes-table .table-img {
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  width: 40px;
  object-fit: cover;
}
.mes-table .table-img:hover {
  cursor: pointer;
}

.mes-table ::v-deep(.cell) {
  padding: 2px 10px;
}
.mes-table ::v-deep(.cell .el-tag) {
  padding: 5px 9px;
}
.table-input {
  color: rgb(104, 103, 103);
  padding: 3px 10px;
  height: 32px;
  line-height: 32px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
}
.table-input:focus {
  outline: 1px solid #49a3fd;
}
</style>
